<!DOCTYPE html>
<html>
    <head>
        <title>Chat HTML5</title>
        <style>
            aside {
                border: 1px solid black;
                border-radius: 15px;
                float: right;
                padding: 10px 20px;
                width: 100px;
            }
            
            summary {
                cursor: pointer;
            }
            
            ul {
                list-style: none;
                margin: 0;
                padding: 0 0 0 15px;
            }
            
            #chat {
                background-color: white;
                border: 2px solid black;
                border-radius: 10px;
                box-shadow: 5px 5px 4px #303030;
                float: left;
                height: 250px;
                padding: 10px;
                overflow: auto;
                width: 400px;
            }
            
            #texto {
                float: left;
                position: relative;
                width: auto;
            }
            
            input[type="text"] {
                border: 2px solid black;
                border-radius: 5px;
                box-shadow: 5px 5px 4px #303030;
                float: left;
                font-size: 20px;
                margin-top: 10px;
                padding: 2px 65px 2px 2px;
                width: 334px;
            }
            
            input[type="button"] {
                cursor: pointer;
                font-size: 15px;
                position: relative;
                left: -65px;
                top: 12px;
            }
            
            #config {
                border: 0;
                width: 150px;
            }
            
            label {
                padding-right: 5px;
                text-align: right;
                width: 90px;
                -webkit-transition: 0.5s;
                z-index: 1000;
                font-weight: bold;
            }
            
            label:hover {
                -webkit-transform: skew(45deg);
                text-shadow: -5px 5px 4px #333,
                    1px 1px 1px black,
                    -1px -1px 1px black,
                    1px -1px 1px black,
                    -1px 1px 1px black;
                color: white;
            }
            
            aside label, aside input {
                float: left;
            }
            
            input + label  {
                clear: both;
            }
            
            input[type="color"] {
                margin-bottom: 4px;
                position: relative;
                top: -5px;
                z-index: 100;
            }
            
            
        </style>
    </head>
    <body>
        <h1 id="nome">{{usuario}}</h1>
        <section>
            <article id="chat"></article>
            <aside>
                <details>
                    <summary>Usu&aacute;rios</summary>
                    <ul>
                        <li>Jo&atilde;o</li>
                        <li>Maria</li>
                        <li>Jo&atilde;o</li>
                        <li>Maria</li>
                        <li>Jo&atilde;o</li>
                        <li>Maria</li>
                        <li>Jo&atilde;o</li>
                        <li>Maria</li>
                    </ul>
                  </details>
            </aside>
        </section>
        <section style="clear: both;">
            <article id="texto">
                <input type="text" />
                <input type="button" value="Enviar" onclick="enviaMsg()" disabled />
            </article>
            <aside id="config">
                <label for="cor_texto">Cor do Texto</label>
                <input type="color" id="cor_texto" onchange="mudaCor('color', this.value)"  />
                <label for="cor_texto">Cor de Fundo</label>
                <input type="color" id="cor_fundo" onchange="mudaCor('backgroundColor', this.value)" />
            </aside>
        </section>
        <script src="/socket.io/socket.io.js"></script>
        <script>
            function mudaCor(attr, cor) {
                var text = document.querySelector('#texto input[type="text"]');
                text.style[attr] = cor;
            }
            
            function enviaMsg() {
                var text = document.querySelector('#texto input[type="text"]'),
                    cor = text.style.color,
                    corFundo = text.style.backgroundColor,
                    nome = document.querySelector('#nome').innerHTML,
                    data = {
                        user: nome,
                        txt: text.value,
                        color: cor,
                        colorBG: corFundo
                    };
                socket.emit('MSG', data);
                console.log(nome + ' enviou...');
                console.log(data);
                text.value = '';
            }
            
            function appendText(data) {
                var chat = document.querySelector("#chat"),
                    msg = data.user + ': '+
                         '<span style="color: ' + data.color +
                           '; background-color: ' + data.colorBG + '">' + 
                           data.txt +
                         '</span>';
                chat.innerHTML += msg + '<br/>';
            }
            
            var socket = io.connect('http://localhost/');
            socket.on('connect', function () {
                var enviar = document.querySelector('input[value="Enviar"]');
                enviar.disabled = false;
                socket.emit('HI', {nome: 'Marcio'});
                socket.on('MSG', function (data) {
                    console.log('Chegou...');
                    console.log(data);
                    appendText(data);
                });
            });
        </script>
    </body>
</html>





